<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link href="../ico/xy.ico" rel="shortcut icon" type="image/x-icon"/>
    <title>用户注册</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        //改变表单宽度
        window.onresize = function () {
            if (document.body.scrollWidth < 600) {
                $("#submitForm").css("width", "100%");
            } else {
                $("#submitForm").css("width", "400px");
            }
        }

        function displayErrMsg(data) {
            var err_msg_block = $("#err_msg_block");
            err_msg_block.css("display", "block");
            err_msg_block.html(data);
        }

        function clearErrMsg() {
            var err_msg_block = $("#err_msg_block");
            err_msg_block.css("display", "none");
            err_msg_block.html("状态提示");
        }

        function checkEmpId() {
            var username_obj = $("#username");

            //检查身份证是否被注册
            $.ajaxSettings.async = false;//同步提交
            var flag_if_registed = 0;
            $.get("user/checkIfUsernameExist", {username: username_obj.val()}, function (data) {
                if (data.metaInfo.msg === "不合法") {//用户已存在
                    username_obj.css("border-color", "red");
                    displayErrMsg("用户名已被注册");
                    flag_if_registed = -1;
                } else {
                    username_obj.css("border-color", "#cccccc");
                    clearErrMsg();
                    flag_if_registed = 0;
                }
            });
            $.ajaxSettings.async = true;//改回异步
            return flag_if_registed;

        }

        function checkEmpPassword() {
            var password_obj = $("#password");
            var reg_password = /^[\S]{6,20}$/;
            var flag = reg_password.test(password_obj.val());
            if (!flag) {
                password_obj.css("border-color", "red");
                displayErrMsg("密码不符合规范：6到20位");
                return false;
            } else {
                password_obj.css("border-color", "#cccccc");
                clearErrMsg();
                return true;
            }
        }

        function checkEmpPasswordConf() {
            var password_obj = $("#password");
            var password_conf_obj = $("#password_conf");
            if (password_obj.val() !== password_conf_obj.val()) {
                password_conf_obj.css("border-color", "red");
                displayErrMsg("两次密码输入不一致");
                return false;
            } else {
                password_conf_obj.css("border-color", "#cccccc");
                clearErrMsg();
                return true;
            }
        }

        $(function () {
            //加载完成，改变表单宽度
            if (document.body.scrollWidth < 600) {
                $("#submitForm").css("width", "100%");
            } else {
                $("#submitForm").css("width", "400px");
            }


            $("#username").blur(checkEmpId);
            $("#password").blur(checkEmpPassword);
            $("#password_conf").blur(checkEmpPasswordConf);
            $("#regist_btn").click(function () {
                var err_msg = "";
                var checkEmpIdResult = checkEmpId();
                if (checkEmpIdResult === -1) err_msg += "用户名已被注册<br>";
                if (!checkEmpPassword()) err_msg += "密码不符合规范：6到20位<br>";
                if (!checkEmpPasswordConf()) err_msg += "两次密码输入不一致<br>";
                if (err_msg !== "") {
                    err_msg += "注册失败！"
                    displayErrMsg(err_msg);
                } else {
                    $.post("user/add", $("#regist_form").serialize(), function (data) {
                        displayErrMsg(data.metaInfo.msg);
                    })
                }
            })
        })
    </script>
</head>
<body>
<div class="container" id="submitForm" style="width:400px">
    <h1 style="text-align: center;margin-top:50px;">科研管理系统</h1>
    <h3 style="text-align: center;">用户注册</h3>

    <form id="regist_form" method="post" accept-charset="utf-8">

        <div class="form-group">
            <label for="username">用户名：</label>
            <input type="text" name="username" class="form-control" id="username" placeholder="请设置用户名"/>
        </div>

        <div class="form-group">
            <label for="password">密码 (长度为6至20位)：</label>
            <input type="password" name="password" class="form-control" id="password"
                   placeholder="请设置密码，长度为6至20位"/>
        </div>

        <div class="form-group">
            <label for="password_conf">确认密码：</label>
            <input type="password" name="password_conf" class="form-control" id="password_conf"
                   placeholder="请再次输入密码"/>
        </div>


        <hr/>

        <div class="alert alert-info alert-dismissible" role="alert" id="err_msg_block" style="display: none;">
            <button type="button" class="close" data-dismiss="alert" id="err_msg_block_x">
                <span id="err_msg_block_x_y">&times;</span>
            </button>
            <strong>状态提示</strong>
        </div>

        <div class="form-group" style="text-align: center;">
            <input class="btn btn btn-primary" type="button" value="注册" id="regist_btn">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="login.html"> <input class="btn btn btn-primary" type="button"
                                         onclick="window.location.href('login.html')" value="返回" id="back_btn"></a>
        </div>
    </form>


</div>

<div style="margin-bottom: 35px"></div>
</body>
</html>